<template>

    <div>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" clearable />
        <el-button type="success" @click="xz">新增</el-button>
        <el-table :data="lb" style="width: 100%">
            <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </div>
                </template>
            </el-table-column>
                       <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                    </div>
                </template>
            </el-table-column>
                       <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.section }}</span>
                    </div>
                </template>
            </el-table-column>
                       <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.role }}</span>
                    </div>
                </template>
            </el-table-column>
                       <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.status }}</span>
                    </div>
                </template>
            </el-table-column>
                       <el-table-column label="用户名称" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.id }}</span>
                    </div>
                </template>
            </el-table-column>

            
            <el-table-column label="2" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled"
                            icon-color="#626AEF" title="Are you sure to delete this?"
                            @confirm="confirmEvent(scope.row.id)" @cancel="cancelEvent">
                            <template #reference>
                                <el-button>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog v-model="dialogFormVisible" title="tit" width="500">
            <el-form :model="addData">
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.userName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.section" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.section" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.section" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Promotion name" :label-width="formLabelWidth">
                    <el-input v-model="addData.section" autocomplete="off" />
                </el-form-item>


            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="qr">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserListApi, userSearchApi, delUserApi, addUserApi, editItemApi } from '@/api/api';
const input = ref('')
let lb = ref([]);
const xx = () => {
    getUserListApi().then(res => {
        console.log('用户列表', res)
        lb.value = res.data.data
    })
}
xx()
watch(input, (input) => {
    console.log(input);
    userSearchApi(input).then(res => {
        console.log('搜索数据', res);
        lb.value = res.data.list

    })

})
// 删除 
import { InfoFilled } from '@element-plus/icons-vue'

const confirmEvent = (id) => {
    delUserApi(id).then(res => {
        if (res.data.code == 1) {
            ElMessage({
                message: '删除成功.',
                type: 'success',
            })
            xx();
        }
    })
}

let tit = ref('新增')
let addData = ref()
let kg = true
let dialogFormVisible = ref(false);

const xz = () => {
    addData.value = []
    tit.value = '新增'
    kg = true
    dialogFormVisible.value = true

}

const handleEdit = (data) => {
    addData.value = data
    tit.value = '修改'
    kg = true
    dialogFormVisible.value = true

}
const qr = () => {
    if (kg) {
        addUserApi(addData.value).then(res => {
            ElMessage({
                message: '新增成功.',
                type: 'success',
            })
            xx()

        })
    }
    else {
        editItemApi(addData.value).then(res => {
            ElMessage({
                message: '修改成功.',
                type: 'success',
            })
            xx()
        })
        dialogFormVisible.value = false
    }

}

</script>

<style lang="scss" scoped></style>